/**
 * create by young (young2f@outlook.com) on 2020/9/16
 * 选择辅料
 */


'use strict';
import React from 'react';
import {Button, Card, Divider, Form, InputNumber} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import {FormField, FormLayout, ModalFooter} from "antd-extra";
import DescriptionGroup from "../../../components/DescriptionGroup";
import UploadPic from "../../../components/UploadPic";

const {Meta} = Card;

moment.locale('zh-cn');

@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...store}))
export default class ModalOutboundLotDetail extends FormBase {
  constructor(props) {
    super(props);
    const {style, values = {fileList: []}, form, isEdit = true} = this.props;
    this.state = {...values};

  }

  componentDidMount() {


  }

  renderFoot = () => {
    const {foot, value, modalRef, form, callback} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              const {shippingFee} = values;
              if (!shippingFee) {
                values.shippingFee = 0;
              }
              values.fileList = this.state.fileList;
              callback(values);
              modalRef.close();
            });

          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };


  getCard = (files) => {
    const temp = [];
    _.map(files, file => {
      temp.push(<Card
        hoverable
        style={{width: 640}}
        cover={<img alt="example" src={file.preview}/>}
      >
      </Card>);
    });
    return temp;
  };


  render() {
    const {style, form, isEdit = true} = this.props;

    const labels = [
      {key: 'prodName', label: '商品品名'},
      {key: 'prodCode', label: '商品编码'},
      {key: 'outboundCount', label: '出货数量'},
      {key: 'outboundDate', label: '出货时间'},
      {key: 'createdTs', label: '创建时间'}
    ];
    const {fileList = [], shippingFee} = this.state;
    return (
      <div style={{...style}}>
        {<DescriptionGroup
          labels={labels}
          values={this.state}
        ></DescriptionGroup>}
        {<Divider></Divider>}
        {
          isEdit && <FormLayout form={form} cols={1}>
            <FormField
              label={'运费'}
              name={'shippingFee'}
              initialValue={shippingFee}
            >
              <InputNumber style={{width: '50%'}}></InputNumber>
            </FormField>
          </FormLayout>
        }
        <UploadPic fileList={fileList} callback={f => this.state.fileList = f.fileList}></UploadPic>
        {/*{*/}
        {/*  this.getCard(fileList)*/}
        {/*}*/}
        {this.renderFoot()}
      </div>

    );
  }
}

